<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯效果</title>

    <!-- 1.导入Vue包 -->
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <!-- 创建一个要控制的区域 -->
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="stop">

        <h4>{{ msg }}</h4>
    </div>
    
    <script>
        // 注意：在VM实例中，如果想要获取data上的数据，或者想要调用mehods中的
        // 方法，必须通过this.数据属性名或者this.方法名来进行访问，这里的this
        // 就表示我们new出来的VM实例对象
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '猥琐发育，别浪--',
                intervalId : null  // 在data上定义一个定时器id
            },
            methods: {
                lang() {
                    // console.log(this.msg);
                    // 添加定时器，每400毫秒执行一次
                    // this

                    if (this.intervalId != null) {
                        return;
                    } 
                    this.intervalId = setInterval(() => {
                        // 获取第一个字符
                        var start = this.msg.substring(0, 1);
                        // 获取后面的全部字符
                        var end = this.msg.substring(1);
                        // 赋值给this.msg
                        this.msg = end + start;
                    }, 400);
                    
                    // 注意：VM实例会监听自身data中所有数据的改变，只要数据一
                    // 发生变化就会自动把最新的数据，从data上同步到页面中去
                    // 好处：程序员只需要关心数据集，不需要考虑如何重新渲染
                    // DOM页面
                },

                // 停止定时器
                stop() {
                    clearInterval(this.intervalId);
                    // 每当清除了定时器需要把intervalId置为null
                    this.intervalId = null;
                }
            }
        })


        // 分析：
        // 1.给【浪起来】按钮绑定一个点击事件  v-on @
        // 2.在按钮的事件处理函数中写相关的业务逻辑代码:拿到msg字符串，
        // 然后调用字符串的substring 来进行字符串的截取操作，把第一个字符
        // 截取出来放到最后一个位置即可
        // 3.为了实现点击下按钮，自动截取的功能，需要把2步骤的代码，放到一个
        // 定时器中去
    </script>
</body>
</html>